<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加人员</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.css">
    <link rel="stylesheet" href="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.reset.css">
    <style>
        .el-form-item {
            margin-bottom: 10px;
        }
        .el-button+.el-button {
            margin-left: 0px;
        }
        .el-button--primary {
            margin-bottom: 10px;
        }
        .fixed-bottom {
            background-color: white;
            z-index: 2;
            width: 100%;
            position: absolute;
            bottom: 0px;
        }
        .content-container .tab-menu {
            padding: 0px 20px;
            background: #F5F7FA;
            height: 50px;
            border-bottom: solid 1px #e6e6e6;
        }

        .content-container .tab-menu .tab-menu-ul {
            height: 40px;
            margin-top: 5px;
            background: #FFFFFF;
            border-top: 1px solid #DCDFE6;
            border-left: 1px solid #DCDFE6;
            border-right: 1px solid #DCDFE6;
            display: inline-block;
            border-top-left-radius: 4px;
            border-top-right-radius: 4px;
            float: left;
        }

        .content-container .tab-menu .tab-menu-ul .tab-menu-li:not(:first-child) {
            border-left: 1px solid #DCDFE6;
        }

        .content-container .tab-menu .title {
            font-size: 22px;
            color: #000000;
            line-height: 22px;
            margin-right: 20px;
        }
        .operation-menu {
            border-bottom: 1px solid #DCDFE6;
        }
        .border-top {
            border-top: 1px solid #DCDFE6;
        }
        .no-border {
            border: 0px;
        }

        .content-container .content-nav {
            background: #F5F7FA;
            height: 15px;
        }

        .operation-menu>div:not(:last-child) {
            border-bottom: 1px solid #DCDFE6;
        }

        .operation-menu .operation-menu__button {
            padding: 10px 20px;
        }

        .operation-menu .operation-menu__search {
            padding: 10px 20px 0px 0px;
        }

        .operation-menu .operation-menu__search .search-condition .search-item {
            float: left;
            display: inline-block;
            margin: 0px 20px 10px 0px;
        }

        .operation-menu .operation-menu__search .search-condition .search-item .label {
            font-size: 14px;
            color: #000000;
            letter-spacing: 0;
            line-height: 16px;
            margin-right: 10px;
            vertical-align: middle;
        }

        .operation-menu .operation-menu__search .search-condition .search-item .search-input {
            display: inline-block;
        }

        .padding-div {
            padding: 20px;
            box-sizing: border-box;
        }
        .permissionConfig-div {
            width: 100%;
            min-height: 300px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .permissionConfig-case {
            display: flex;
            flex-direction: column;
            border: solid 1px #e6e6e6;
            border-radius: 5px;
            margin-right: 20px;
            margin-bottom: 20px;
        }

        .permissionConfig-case .permissionConfig-item {
            min-width: 200px;
            box-sizing: border-box;
            display: flex;
            flex-direction: row;
            padding-right: 10px;
        }
        .permissionConfig-div .permissionConfig-item .permissionConfig-tree {
            margin: 10px;
        }

    </style>
</head>

<body style="display: none;">
<div id="app" class="container" flex>
    <el-admin-menu :user-detail="userDetail" :menus="menus" @logout="logout">
        <div class="content-container" flex-box=1 flex="dir:top">
            <div flex-box="0" class="tab-menu" flex="cross:center">
                <div class="title" flex-box=0>添加人员</div>
            </div>
            <div flex-box="1" style="position: relative;">
                <div class="operation-menu">
                    <div class="operation-menu__button" flex>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0" class="search-condition">
                                    <div class="search-item">
                                        <span class="label">姓名</span>
                                        <div class="search-input">
                                            <el-input v-model="username" placeholder="" size="small"></el-input>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <span class="label">所属公司</span>
                                        <div class="search-input">
                                            <el-select v-model="value" placeholder="全部" size="small">
                                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                                                </el-option>
                                            </el-select>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <span class="label">账号</span>
                                        <div class="search-input">
                                            <el-input v-model="username" placeholder="" size="small"></el-input>
                                        </div>
                                    </div>
                                    <div class="search-item">
                                        <span class="label">密码</span>
                                        <div class="search-input">
                                            <el-input v-model="username" placeholder="" size="small"></el-input>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0" class="search-condition">
                                    <div class="search-item">
                                        <span class="label">账号状态</span>
                                        <el-radio v-model="status" label="1">启用</el-radio>
                                        <el-radio v-model="status" label="2">禁用</el-radio>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content-nav"></div>
                <div class="padding-div">
                    <el-radio-group v-model="radio">
                        <el-radio-button label="characterConfig">配置角色</el-radio-button>
                        <el-radio-button label="dataPermission">数据权限</el-radio-button>
                    </el-radio-group>
                    <div v-if="radio=='characterConfig'" style="margin-top: 20px;margin-bottom: 60px;">
                        <el-transfer
                                filterable
                                :filter-method="filterMethod"
                                filter-placeholder="请输入角色名称"
                                :titles="['角色', '该人员已有角色']"
                                v-model="value2"
                                :data="data">
                        </el-transfer>
                    </div>
                    <div v-if="radio=='dataPermission'"  style="margin-top: 20px;margin-bottom: 60px;">
                        <div class="permissionConfig-div">
                            <div class="permissionConfig-case">
                                <div class="permissionConfig-item">
                                    <div class="permissionConfig-tree">
                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                        <div style="margin: 15px 0;"></div>
                                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                                        </el-checkbox-group>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="operation-menu border-top fixed-bottom">
                    <div class="operation-menu__button" flex>
                        <div flex-box="1"></div>
                        <div flex-box="0">
                            <div class="operation-menu__search" flex="cross:top">
                                <div flex-box="0">
                                    <el-button type="default" size="small">删除</el-button>
                                    <el-button type="primary" size="small">保存</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-admin-menu>
</div>
</body>
<script src="common/config.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>window.jQuery||document.write('<script src="//cdn.staticfile.org/jquery/3.1.1/jquery.min.js"><\/script>')</script>
<script src="testdata/test_data.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.index.js"></script>
<script src="//cdnhhmk.oss-cn-shenzhen.aliyuncs.com/libs/admin.comon.js"></script>
<script>
    const cityOptions = ['数据1', '数据2', '数据3', '数据4'];
    new Vue({
        el: '#app',
        data: function() {
            const generateData2 = _ => {
                const data = [];
                const cities = ['主管', '市场专员', '财务专员', '研发', '运营'];
                const pinyin = ['zhugaun', 'shichang', 'caiwu', 'yanfa', 'yunying'];
                cities.forEach((city, index) => {
                    data.push({
                        label: city,
                        key: index,
                        pinyin: pinyin[index]
                    });
                });
                return data;
            };
            return {
                data: generateData2(),
                value2: [],
                filterMethod(query, item) {
                    return item.pinyin.indexOf(query) > -1;
                },
                data2: [{
                    id: 1,
                    label: '一级 1',
                    children: [{
                        id: 4,
                        label: '二级 1-1',
                        children: [{
                            id: 9,
                            label: '三级 1-1-1'
                        }, {
                            id: 10,
                            label: '三级 1-1-2'
                        }]
                    }]
                }, {
                    id: 2,
                    label: '一级 2',
                    children: [{
                        id: 5,
                        label: '二级 2-1'
                    }, {
                        id: 6,
                        label: '二级 2-2'
                    }]
                }, {
                    id: 3,
                    label: '一级 3',
                    children: [{
                        id: 7,
                        label: '二级 3-1'
                    }, {
                        id: 8,
                        label: '二级 3-2'
                    }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                count: 1,
                dialogDefinitionChange: false,
                dialogSettlementRule: false,
                dialogResultOfChange: false,
                dialogSureSave: false,
                form: {
                    ruleName: '',
                    module: '',
                    scale: '',
                    beginTime: '',
                    endTime: '',
                    effect: '',
                },
                form1: {
                    balanceValue: '',
                    gradientBegin: '',
                    gradientEnd: '',
                },
                formLabelWidth: '100px',
                visible: false,
                status: '1',
                radio: 'characterConfig',
                options: [{
                    value: '选项1',
                    label: '是'
                }, {
                    value: '选项2',
                    label: '否'
                }],
                value: '',
                multipleSelection: [],
                username: '',
                checkAll: false,
                checkedCities: [],
                cities: cityOptions,
                isIndeterminate: true,
                // 来自test_data.js
                menus: menus,
                // 来自test_data.js
                userDetail: userDetail
            }
        },
        methods: {
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            //修改定义保存
            definitionChange() {
                //请求数据......
                this.dialogResultOfChange = true;
                this.dialogDefinitionChange = false;
            },
            //修改结算规则保存
            settlementRule() {
                //请求数据......
                this.dialogResultOfChange = true;
                this.dialogSettlementRule = false;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            saveNewRule() {
                if(this.multipleSelection.length<1) {
                    this.$alert('还没勾选任何项目', '提醒', {
                        confirmButtonText: '确定',
                        callback: function(action) {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }else {
                    //确定保存？
                    this.dialogSureSave = true;
                }
            },
            //确认保存
            sureSave() {
                this.dialogSureSave = false;
                this.dialogResultOfChange = false;
            },

            //树形控件相关方法
            handleCheckChange(data, checked, indeterminate) {
                console.log(data, checked, indeterminate);
            },
            handleNodeClick(data) {
                console.log(data);
            },
            loadNode(node, resolve) {
                if (node.level === 0) {
                    return resolve([{ name: 'region1' }, { name: 'region2' }]);
                }
                if (node.level > 3) return resolve([]);

                var hasChild;
                if (node.data.name === 'region1') {
                    hasChild = true;
                } else if (node.data.name === 'region2') {
                    hasChild = false;
                } else {
                    hasChild = Math.random() > 0.5;
                }

                setTimeout(function() {
                    var data;
                    if (hasChild) {
                        data = [{
                            name: 'zone' + this.count++
                        }, {
                            name: 'zone' + this.count++
                        }];
                    } else {
                        data = [];
                    }

                    resolve(data);
                }, 500);
            },
            logout() {
                window.location.href = 'login.html';
            },
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        },
        mounted() {
            document.querySelector('body').style.display = 'block';
        }
    });
</script>
</html>
